【精选】NETCore入门系列（自定义IHtmlHelper、TagHelper、PartialView和ViewComponent）

2023-10-21 08:15| 来源: 网络整理| 查看: 265

文章目录一、创建ASP.NET Core Web 项目二、自定义IHtmlHelper三、自定义TagHelper四、局部视图(PartialView)的使用五、视图组件（ViewComponent）的使用六、源码

一、创建ASP.NET Core Web 项目

1、创建一个ASP.NETCore Web应用（模型-视图-控制器），并将其命名为RazorWebApp。在这里插入图片描述 2、视图渲染（项目运行后，发现修改视图内容后，刷新没效果，需要重新启动才生效，此时可通过添加一个nuget包解决）（1）添加一个名为Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation的nuget包。

（2）在startup.cs中添加该组件到管道中，代码如下：

services.AddRazorPages().AddRazorRuntimeCompilation(); 二、自定义IHtmlHelper

1、如下图，分别创建Utils和RazorExtension文件夹，并在该文件夹中创建一个名为HtmlHelperExtensions类。在这里插入图片描述 2、将HtmlHelperExtensions设置为静态类，并在其中分别创建Br和Img方法，这两个方法是自定义扩展类，其中当Br方法被调用时，当前html会出现"换3行"的代码；Img方法扩展了html中的img标签，调用该扩展方法，会在当前html页面上生成一个img标签。

public static class HtmlHelperExtensions { /// /// 构建一个换3行的扩展方法 /// /// /// public static IHtmlContent Br(this IHtmlHelper helper) { return new HtmlString(""); } /// /// 扩展img方法 /// /// /// /// public static IHtmlContent Img(this IHtmlHelper helper,string src) { return new HtmlString($"

"); } }

3、将项目中默认的Index.cshtml内容做如下更改

@{ ViewData["Title"] = "Home Page"; } Welcome Learn about building Web apps with ASP.NET Core. IHtmlHelper @Html.Br() @Html.Img("你的图片所在路径")

4、运行项目，F12可看到当前html中有3个br标签和一个img标签输出，其中img中图片是在百度找的。在这里插入图片描述

三、自定义TagHelper

1、在RazorExtension目录中创建一个名为StudentTagHelper类。 2、该类代码如下：

//1、标记当前tag元素的名称，如果不标记，则默认使用当前去掉“TagHelper”的类名 [HtmlTargetElement("student")] public class StudentTagHelper:TagHelper { //2、定义一个Age字段，前端使用该标签时可给该属性传值 public int Age { get; set; } //3、重写Process public override void Process(TagHelperContext context, TagHelperOutput output) { // base.Process(context, output); output.TagName = "div";//对应的html标签 output.Attributes.Add("id","007");//标签中的属性 output.Attributes.Add("name","007"); output.Attributes.Add("age",Age); output.PreContent.SetContent("扩展TagHelper输出的内容！");//当前标签的内容 } }

3、在Index,cshtml中添加如下代码，此时会发现页面上并没有输出一个"扩展TagHelper输出的内容！"的div标签，原因是未在_ViewImports.cshtml中引入自定义TagHelper的命名空间。

TagHelper

4、找到_ViewImports.cshtml，并在其中添加"@addTagHelper *, RazorWebApp"代码，这段代码的意思是引入当前项目RazorWebApp中所有自定义的taghelper，完整代码如下：

@using RazorWebApp @using RazorWebApp.Models @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @addTagHelper *, RazorWebApp

5、重新启动项目，可看到自定义的TagHelper可正常输出内容。在这里插入图片描述

四、局部视图(PartialView)的使用

1、在Views/Home目录下创建一个名为PartialView.cshtml视图文件，并向其中添加如下代码：

这是局部视图局部视图的内容

2、在Index.cshtml中添加如下代码，引入上一步中创建的视图文件。

@await Html.PartialAsync("PartialView")

3、运行项目，可看到界面中输出PartialView.cshtml的内容，如下图：

五、视图组件（ViewComponent）的使用

1、在Utils目录下创建一个名为ViewComponentExtension的目录，并在其中创建一个名为StudentViewComponent类。在这里插入图片描述 2、StudentViewComponent.cs的代码如下：

[ViewComponent(Name ="StudentList")] //1、自定义组件名，如果没有设置，则会取StudentViewComponent中的"Student"为组件名 public class StudentViewComponent: ViewComponent //2、继承ViewComponent类 { /// /// 3、定义异步的InvokeAsync方法，它是返回组件内容的方法，这里的方法类似控制器中的方法 /// /// public async Task InvokeAsync() { ViewBag.UserName = "007";//用户名 var list = await GetStudents(); return View(list); //return View("~/Views/Shared/Components/StudentList/Default.cshtml",list); //可自定义返回的cshtml路径 } /// /// 4、获取学生数据 /// /// public Task GetStudents() { return Task.Run(() => { return new List() { new Student(){ Id=1,Name="小明"}, new Student(){ Id=2,Name="小红"}, new Student(){ Id=3,Name="小兰"}, new Student(){ Id=4,Name="小李"}, new Student(){ Id=5,Name="小王"}, new Student(){ Id=6,Name="小刚"}, }; }); } } /// /// 学生类 /// public class Student { public int Id { get; set; } public string Name { get; set; } }

3、在Views/Shared目录中创建Components/StudentList目录，并在该目录中创建一个名为Default.cshtml视图文件（这是视图组件默认"return view()"指向的视图文件地址） 4、Default.cshtml视图文件的代码如下：

@using RazorWebApp.Utils.ViewComponentExtension; @model List CurUser：@ViewBag.UserName @foreach (var item in Model) { 用户[email protected]：@item.Name }

5、在Index.cshtml中添加如下代码（引用自定义的视图组件）：

@await Component.InvokeAsync("StudentList")

6、运行项目，可看到浏览器中正确输出如下内容：在这里插入图片描述

六、源码

https://gitee.com/wusuoweixgy/NET5Code/tree/master/RazorWebApp

【本文地址】

公司简介

联系我们